<script setup lang="ts">
import { ref } from 'vue'
import dayjs from 'dayjs'
import { onLoad } from '@dcloudio/uni-app'
import { getJobList } from '@/api/job'
import { getPaymentRecord } from '@/api/pay'
import type { PaymentRecordDto } from '@/api/pay/type'
import type { JobItemDto } from '@/api/job/type'
import user from '@/composables/user'

export interface ExtraDataDto {
    id: number
    isCollectBankCardImg: number | string
    isCollectOpenBankAddress: number | string
    isCollectOpenBankCity: number | string
    isCollectOpenBankName: number | string
}

const recordData = ref<PaymentRecordDto>({} as PaymentRecordDto)

const jobList = ref<JobItemDto[]>([])
const isEdition = ref(false)
const pageInfo = ref({
    pageNum: 1,
    pageSize: 10,
    hasNextPage: true,
    total: 0,
})

/**
 * 获取列表数据
 *
 * @returns {Promise<void>} 无返回值
 */
async function getList() {
    const res = await getJobList({
        pageNum: pageInfo.value.pageNum,
        pageSize: pageInfo.value.pageSize,
    })
    pageInfo.value.hasNextPage = res.hasNextPage
    jobList.value = res?.list || []
}

async function getRecord(id: number) {
    const res = await getPaymentRecord({ id })
    recordData.value = res

    res.params.sign_time_in = res.params.sign_time_in ? res.params.sign_time_in.split(' ')[1] : ''
    res.params.sign_time_out = res.params.sign_time_out ? res.params.sign_time_out.split(' ')[1] : ''

    const age = await getCardAge(res.idCardNo)
    // 快速领薪
    isEdition.value = !!res.flagQuicklyGetSalary && age >= 45
}

function onItemClick(item: JobItemDto) {
    uni.navigateTo({
        url: `/package-mine/pages/job-detail/job-detail?id=${item.id}`,
    })
}

onLoad(async (query) => {
    await user.waitLogin()
    console.log(query, 'queryqueryqueryquery')
    await getRecord(Number(query?.id))
    await getList()
})
</script>

<template>
    <NavbarContainer nav-title="薪资详情" nav-color="#fff"
                     background-url="https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManager363631e9-06ab-476d-890f-a9978e34dd83.png">
        <view class="set-bg h-full">
            <view class="box-border px-30rpx">
                <view
                    class="mb-16rpx mt-40rpx box-border w-full flex flex-col items-center gap-24rpx rounded-16rpx bg-#ffffff p-30rpx">
                    <image class="h-120rpx w-120rpx"
                           src="https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManager867f09b7-e451-4ac6-bca6-f6aba6ad7660.png" />
                    <view class="text-28rpx">{{ recordData.serveCompanyName }}</view>
                    <view class="text-36rpx font-bold">+{{ recordData.paymentAmount }}</view>
                    <view class="w-full flex items-center justify-between">
                        <view class="text-24rpx text-#9497b1">
                            发薪时间：<span class="text-#202536">{{
                                recordData.payTime && dayjs(recordData.payTime).format('YYYY-MM-DD')
                            }}</span>
                        </view>
                        <view class="text-24rpx text-#9497b1">
                            收款账户：<span class="text-#202536">{{
                                recordData.payAccountFlag === 20001 ? '支付宝支付' : '微信支付'
                            }}</span>
                        </view>
                    </view>
                    <view class="w-full flex items-center justify-between">
                        <view class="text-24rpx text-#9497b1">
                            发薪备注：<span class="text-#202536">{{
                                recordData.detailRemarks ? recordData.detailRemarks : '--'
                            }}</span>
                        </view>
                    </view>
                </view>
            </view>
            <view class="box-border min-h-80vh w-full rounded-lt-26rpx rounded-rt-26rpx bg-#FAFAFC p-30rpx">
                <view class="mb-24rpx text-32rpx text-#202536 font-bold">为您推荐</view>
                <view class="w-full flex flex-col gap-30rpx">
                    <view v-for="(item, i) in jobList" :key="i" class="w-fill box-border flex flex-col rounded-16rpx bg-#ffffff px-24rpx py-30rpx" @click="onItemClick(item)">
                        <view class="border-b-2rpx border-b-#EAEAEF border-b-solid pb-24rpx">
                            <view class="mb-34rpx flex items-center gap-8rpx">
                                <view
                                    class="h-40rpx min-w-50rpx flex items-center justify-center rounded-35rpx bg-#00D679 px-12rpx text-24rpx text-#ffffff">
                                    日结工
                                </view>
                                <view class="text-32rpx text-#202536 font-bold">{{ item.jobName }}</view>
                            </view>
                            <view class="mb-20rpx flex items-center justify-between">
                                <view class="text-24rpx text-#565868">{{ item.serveCompanyName }}</view>
                                <view class="text-32rpx text-#FF7642 font-bold">{{ item.salary }}{{ item.jobSalaryType }}</view>
                            </view>
                            <view v-if="item?.jobTag" class="flex flex-wrap items-center gap-10rpx">
                                <view v-for="(j, k) in item?.jobTag.split(';')" :key="k"
                                      class="box-border flex items-center justify-center rounded-8rpx bg-#F4F4F7 p-12rpx text-24rpx text-#9497B1">
                                    {{ j }}
                                </view>
                            </view>
                        </view>
                        <view class="flex items-center justify-between pt-30rpx">
                            <view class="text-24rpx text-#9497B1">{{ `${item.city} ${item.district}` }}</view>
                            <view
                                class="h-50rpx w-100rpx flex items-center justify-center rounded-40rpx bg-#EBEFFE text-24rpx text-#3E5FF5">
                                去查看
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </NavbarContainer>
</template>

<style scoped>
.set-bg {
    background: linear-gradient(90deg, #3e5ff5 0%, #3b72f5 100%);
}

.set-button-bg {
    background: linear-gradient(-264deg, #FF8F34 3%, #FF363D 98%);
}
</style>

<route lang="json">
{
    "style": {
        "navigationBarTextStyle": "white",
        "navigationBarTitleText": "薪资详情",
        "mp-alipay": {
            "transparentTitle": "always"
        }
    }
}
</route>
